<script setup>
import DetailPanel from '@/components/detail-panel/detail-panel.vue'
import { ref, onMounted, watchEffect } from 'vue'

import { storeToRefs } from 'pinia'
import useDetailStore from '@/stores/modules/detail'

const detailStore = useDetailStore()
const { getMap } = storeToRefs(detailStore)

const mapRef = ref()

onMounted(() => {
  const map = new BMapGL.Map(mapRef.value) // 创建地图实例

  watchEffect(() => {
    const point = new BMapGL.Point(getMap.value?.longitude, getMap.value?.latitude) // 创建点坐标
    map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
    const marker = new BMapGL.Marker(point)
    map.addOverlay(marker)
  })
})
</script>

<template>
  <div class="detail-map">
    <DetailPanel title="位置周边" more="查看周边更多信息">
      <div class="baidu" ref="mapRef"></div>
    </DetailPanel>
  </div>
</template>

<style lang="less" scoped>
.detail-map {
  .baidu {
    height: 250px;
  }
}
</style>
